import React, { PureComponent } from "react";
import "./button.css";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { inputNumberAction } from "../actions";


class NumKey extends PureComponent {
    handleClick(){
        this.props.inputNumberAction(this.props.display)
    }

    render() {
        return (
            <button className="button" style={{
                flex:1,
                border:'1px',
                borderStyle:'solid',
                borderColor:'#D8D8D8',
                fontSize:40,
                fontWeight:500,
                color:'white',
                display:'inline-flex',
                alignItems:'center',
                justifyContent:'center'}}
                onClick={this.handleClick.bind(this)}
                >
                {this.props.display}
            </button>
        );
    }
}

function mapStateToProps(state) {
    return {
        result: state.displayNum
    };
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ inputNumberAction }, dispatch);
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(NumKey);